<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :width="800" :height="300" :title="getTitle" @ok="handleSubmit">
    <BasicForm @register="registerForm"></BasicForm>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, computed, unref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form';
  import {FormSchema} from '/@/components/Table';
  const getTitle = ref("新增");
  import { defHttp } from '/@/utils/http/axios';
const formSchema: FormSchema[] = [
  {
    label: '门店id',
    field: 'id',
    component: 'Input',
    dynamicDisabled: true
  },
     {
    label: '门店编码',
    field: 'storeCode',
    component: 'Input',
    dynamicDisabled: true
  },
    {
    label: '门店名称',
    field: 'storeName',
    component: 'Input',
    dynamicDisabled: true
  },
    {
    label: '微信群',
    field: 'wxbotGroupWxid',
    component: 'ApiSelect',
    componentProps: ({ formModel }) => {
      return {
        //multiple: 多选；不填写为单选
        //mode: 'multiple',
        //请求api,返回结果{ result: { records:[{'id':'1',name:'scott'},{'id':'2',name:'小张'}] }}
        api: (params) => defHttp.get({ url: '/slt/xlWxbotGroup/listAll', params }),
        //数值转成String
        numberToString: false,
        //标题字段
        labelField: 'nick',
        //值字段
        valueField: 'groupWxid',
        //请求参数
        params: { pid: 0 },
        //返回结果字段
        resultField: 'result',
        onChange: (e, selected) => {
          //获取选中的字典值
          formModel.l1Type = selected.label;
          formModel.wxbotAtWxid = '';
          formModel.memWxid = '';
        },
      };
    },
    required: true,
  },
  {
    label: '成员',
    field: 'wxbotAtWxid',
    component: 'ApiSelect',
    componentProps: ({ formModel }) => {
      return {
        //multiple: 多选；不填写为单选
        //mode: 'multiple',
        //请求api,返回结果{ result: { records:[{'id':'1',name:'scott'},{'id':'2',name:'小张'}] }}
        api: (params) => defHttp.get({ url: '/slt/xlWxbotGroupMember/getMemsByGroupId', params }),
        //数值转成String
        numberToString: false,
        //标题字段
        labelField: 'memNick',
        //值字段
        valueField: 'memWxid',
        //请求参数
        params:  { groupId: formModel.wxbotGroupWxid } ,
        mode: "multiple" ,
        //返回结果字段
        resultField: 'records',
        onChange: (e, selected) => {
          //获取选中的字典值
          formModel.l2Type = selected.label;
        },
      };
    },
    ifShow: ({ values }) => {
      return !!values.wxbotGroupWxid;
    },
    required: true,
  },
    
]

  //表单配置
  const [registerForm, { setProps, resetFields, setFieldsValue, validate, updateSchema, scrollToField }] = useForm({
    schemas: formSchema,
    showActionButtonGroup: false,
  });
  const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
    //重置表单
    await resetFields();
    setModalProps({ confirmLoading: false, showCancelBtn: data?.showFooter, showOkBtn: data?.showFooter });
   
      await setFieldsValue({
        ...data
      });
  })
  // Emits声明
const emit = defineEmits(['register', 'success']);
  import { bindWxbot } from '../XlCustomerStoreInfo.api';
  async function handleSubmit(){
    try {
        let values = await validate();
        setModalProps({ confirmLoading: true });
        //提交表单
        await bindWxbot(values);
        //关闭弹窗
    closeModal();
    //刷新列表
    emit('success');
    } finally {
        setModalProps({ confirmLoading: false });
    }
  }
</script>
